<template>
    <div class="center_div">
        <div>
            <span>姓名:<el-input v-model="search.employeename" style="width: 20%;"></el-input></span>
            <el-button icon="" @click="SearchEmploy()" type="primary">搜索</el-button>
        </div>
        <el-table :data="employee" width="100%" v-loading="tableLoading" element-loading-text="Loading">
            <el-table-column prop="employeename" label="姓名" min-width="90"></el-table-column>
            <el-table-column prop="username" label="账号" min-width="90"></el-table-column>
            <el-table-column prop="phone" label="电话" min-width="90"></el-table-column>
            <el-table-column prop="email" label="邮箱" min-width="120"></el-table-column>
            <el-table-column prop="department" label="部门" min-width="90"></el-table-column>
            <el-table-column prop="role" label="职位" min-width="90" align="center">
                <template slot-scope="scope">
                    <el-tag effect="dark" v-if="scope.row.role === 0" type="info">员工</el-tag>
                    <el-tag effect="dark" v-if="scope.row.role === 1" type="success">组长</el-tag>
                    <el-tag  effect="dark" v-if="scope.row.role === 2">部长</el-tag>
                    <el-tag  effect="dark" v-if="scope.row.role === 3">管理员</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" min-width="90" align="center">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status === 0" type="info">注册中</el-tag>
                    <el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
                    <el-tag v-if="scope.row.status === 2"  type="danger">失效</el-tag>
                    <el-tag v-if="scope.row.status === 5" type="warning">升职中</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="awardtimes" label="抽奖次数" min-width="90" align="center">
                <template slot-scope="scope">
                    <el-tag type="info">{{scope.row.awardtimes}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" min-width="120" align="center">
                <template slot-scope="scope">
                    <el-button type="danger" @click="editEmployee(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog
                title="编辑员工信息"
                :visible.sync="dialogVisible"
                width="50%"
                >
            <el-form ref="form" :model="employeeDetail" label-width="100px" style="margin-top:50px;">
                <el-form-item label="姓名" prop="employee">
                    <el-input v-model="employeeDetail.employeename" style="width: 50%;"></el-input>
                </el-form-item>
                <el-form-item label="账号" prop="username">
                    <el-input v-model="employeeDetail.username" style="width: 50%;"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="employeeDetail.phone" style="width: 50%;"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="employeeDetail.email" style="width: 50%;"></el-input>
                </el-form-item>
                <el-form-item label="部门" prop="department">
                    <el-select v-model="employeeDetail.departmentid" placeholder="请选择">
                        <el-option
                                v-for="item in departmentList"
                                :key="item.departmentid"
                                :label="item.departmentname"
                                :value="item.departmentid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色" prop="role">
                    <el-select v-model="employeeDetail.role" placeholder="请选择">
                        <el-option
                                v-for="item in roleList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="employeeDetail.status" placeholder="请选择">
                        <el-option
                                v-for="item in statusList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="抽奖次数" prop="awardtimes">
                    <el-input-number v-model="employeeDetail.awardtimes" controls-position="right" :min="0" :max="100"></el-input-number>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateEmployee">更新</el-button>
              </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                dialogVisible: false,
                statusList: [
                    {label: '注册中',value: 0},
                    {label: '正常',value: 1},
                    {label: '失效',value: 2},
                    {label: '升职中',value: 3}
                ],
                roleList: [
                    {label: '员工',value: 0},
                    {label: '组长',value: 1},
                    {label: '部长',value: 2}
                ],
                employee: [
                    {employid: 1,employeename: '李大二',username: 'lidae',phone: '12345667',email: 'aawoef@qq.com', department: '组织部', role: 0, status: 1, awardtimes: 2},
                    {employid: 1,employeename: '王小五',username: 'wangxiaowu',phone: '12345667',email: 'aawoef@qq.com', department: '组织部', role: 2, status: 2, awardtimes: 2}
                ],
                search: {},
                employeeDetail: {},
                department: {},
                departmentList: [],
                tableLoading: false
            }
        },
        created() {
            this.fetchDepart()
            clearTimeout(this.timer);  //清除延迟执行
            this.timer = setTimeout(()=>{   //设置延迟执行
                this.fetchEmployee()
            },300)

        },
        methods: {
            async fetchEmployee(){
                this.tableLoading = true
                let {code ,data ,msg} = await this.$post('/managerboss/adminpeople')
                if(code === 200) {
                    this.employee = data.map(item => {
                        item.department = this.department[item.departmentid]
                        return item
                    })
                    console.log(this.employee)
                }else {
                    this.$message.error(msg)
                }
                this.tableLoading = false
            },
            async fetchDepart(){
                let {code ,data ,msg} = await this.$post('/register')
                if(code === 200) {
                    this.departmentList = data
                    for (let i = 0; i < data.length; i++) {
                        this.department[data[i].departmentid] = data[i].departmentname
                    }
                    console.log(this.department)
                }else {
                    this.$message.error(msg)
                }
            },
            async updateEmploy(){
                let {code ,data ,msg} = await this.$post('/managerboss/editsubmitpeople',{
                    data: this.employeeDetail
                })
                if(code === 200) {
                    console.log(data)
                    this.$message({
                        message: '更新成功',
                        type: 'success'
                    })
                    this.dialogVisible = false
                    this.fetchEmployee()
                }else {
                    this.$message.error(msg)
                }
            },
            editEmployee(row) {
                this.employeeDetail = row
                this.dialogVisible = true
            },
            updateEmployee() {
                console.log(this.employeeDetail)
                this.updateEmploy()
            }
        }

    }
</script>

<style>
    .center_div{
        width: 80%;
        margin:0 auto;
        margin-bottom: 50px;
    }
</style>